"use strict";

!function () {

	// 包含全体点的容器
	var tagDot = document.getElementsByClassName("dot-container")[0],
	    tagMoveContainer = document.getElementsByClassName("contain")[0]
	// 索引和标志

	,
	    itemIndex = 0
	// 本质是判断，鼠标是否在button上面。去除这个判断会导致，鼠标从外部移入的第一次跳转跳两个页面

	,
	    runflag = 0
	// 图片的长度

	,
	    tagContainer = document.getElementsByClassName("container")[0];
	// 判断有没有这个类
	function hasClass(el, className) {
		if (el && el.className !== void 0) {
			var classList = el.className.split(/\s+/);
			if (classList.indexOf(className) >= 0) {
				return true;
			} else return false;
		} else {
			return false;
		}
	}

	// 删除这个类
	function deleteClass(el, className) {
		if (hasClass(el, className)) {
			var classList = el.className.split(/\s+/);
			var deleteIndex = classList.indexOf(className);
			classList.splice(deleteIndex, 1);
			el.className = classList.join(' ');
		} else {
			return;
		}
	}

	// 添加这个类
	function addClass(el, className) {
		if (hasClass(el, className)) {
			return false;
		} else {
			var classList = el.className.split(/\s+/);
			classList.push(className);
			el.className = classList.join(" ");
		}
	}

	// 清空所有的active类
	function mapRemove(sameEl, className) {
		var tagEl = document.getElementsByClassName(sameEl);
		for (var i = 0, j = tagEl.length; i != j; i++) {
			deleteClass(tagEl[i], className);
		}
	}

	// 删除所有的active并给当前增加
	function setActive() {
		mapRemove("dot", "active");
		var index = itemIndex;
		// index等于5说明是第六张，这个时候要等同于给第一张设置active
		if (index === 5) {
			index = 0;
		}
		var tag = document.getElementsByClassName("dot")[index];
		addClass(tag, "active");
	}

	//取得css样式
	// function getStyle(element, attr) {
	// 	// 前者是现代浏览器支持的方法，后面是ie
	// 	return element.currentStyle ? element.currentStyle[attr] : window.getComputedStyle(element, null)[attr] || 0;
	// }

	// 索引加一
	function addItermIndex() {
		itemIndex++;
		if (itemIndex > 4) {
			itemIndex = 0;
		}
	}

	// 清除定时器
	function myClear(flag) {
		if (flag) {
			clearTimeout(flag);
		}
	}

	// 求出目标距离并跳转加活跃类
	function moveAndAdd() {
		moveTo(itemIndex);
		setActive();
	}

	// 鼠标暂停
	function mousehover() {
		tagContainer.addEventListener("mouseenter", function () {
			myClear(runflag);
		});
		tagContainer.addEventListener("mouseleave", function () {
			run();
		});
	}

	// 点击dot
	function bindDot() {
		tagDot.addEventListener("click", function (e) {
			myClear(runflag);
			var target = e.target;
			if (hasClass(target, "dot")) {
				// 相同就不进行改变
				if (itemIndex === parseInt(target.dataset.index)) {
					return;
					// 最后向前跳的时候，如果是第一页，那么不应该变化，并且吧位置归0
				} else {
					itemIndex = parseInt(target.dataset.index) - 1;
					moveAndAdd();
				}
			} else {
				return;
			}
		});
	}

	// 绑定函数
	function bindEvent() {
		bindDot();
		mousehover();
	}

	// 执行绑定事件
	bindEvent();

	// 运动函数
	function moveTo(i) {
		tagMoveContainer.className = 'contain';
		var tagclassname = 'contain-' + i;
		addClass(tagMoveContainer, tagclassname);
		addItermIndex();
	}

	// 运动
	function run() {
		// 这和js3不一样，这里需要清除，因为135行的问题
		myClear(runflag);
		moveAndAdd();
		runflag = setTimeout(run, 3000);
	}
	// 这里需要结合css看变化，
	// 执行
	setActive();
	setTimeout(run, 3000);
}();